<template>
	<view>
		<view class="items">
			<view class="item">
				<view class="item-xs">推荐</view>
				<view class="item-x">千里眼</view>
				<view class="item-x">搞笑</view>
				<view class="item-x">娱乐</view>
				<view class="item-x">社会</view>
				<view class="item-x">音乐</view>
				<view class="item-x">科技</view>
			</view>
		</view>
		<view class="item-ss"></view>
		<!-- 第一部分 -->
		<view class="sp" v-for="(item,i) in videoList":key="i">
			<navigator url="videocontent">
				<view class="x">{{item.title}}</view>
			</navigator>
			<video src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4" controls></video>
			<view class="dibu">
				<view class="wenzi">
					<view class="wenzizf">
						<image style="width: 45rpx; height: 45rpx;" src="../../../static/1.jpg" mode=""></image>
					</view>
					<view class="wenzizf" style="font-size: 32rpx;">帘外雨潺潺...</view>
					<view class="wenzizf" style="border-bottom-color: #999999; margin-top: 0rpx;">|</view>
					<view class="wenzizf" style="font-size: 32rpx; color: #DD524D; font-weight: bold;">关注</view>
				</view>
				<view class="tupian">
					<view class="tupiandx">
						<image src="../../../static/xingxi.png" mode=""></image>
					</view>
					<view class="tupiandx">
						<image src="../../../static/dianzan.png" mode=""></image>
					</view>
					<view class="tupiandx" style="margin-top: -10rpx; padding-right: 20rpx;">...</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				videoList : []
			}
		},
		onLoad(){
			this.getData();
		},
		methods: {
			getData(){
				console.log("-----------执行查询操作-----------");
				uniCloud.callFunction({
					name:"video-get",
					success:(e) => {
						console.log(e.result);
						this.videoList = e.result.data;
					}
				})
			}
		}
	}
</script>

<style>
	.tupian image{
		width: 40rpx;
		height: 40rpx;
	}
	.items{
		background-color: #FFFFFF;
		position: fixed;
		z-index: 1;
		width: 100%;
		top: 110rpx;
	
	}
	.item{
		background-color: #FFFFFF;
		display: flex;
		flex-direction: row;
		margin: 0rpx 30rpx 20rpx 10rpx;
		font-size: 40rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}
	.item-ss{
		width: 100%;
		height: 60rpx;
	}
	
	.tab_title view{
		display: inline-block;
		margin-left: 30rpx;
		line-height: 30rpx;
		color: #FFFFFF;
	}
	.dibu{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		-webkit-justify-content:space-between;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
	}
	.wenzi{
		display: flex;
		flex-direction: row;
	}
	.tupian{
		display: flex;
		flex-direction: row;
	}
	.tupiandx{
		margin-left: 60rpx;
	}
	.wenzizf{
		margin-right: 20rpx;
	}
	.x{
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		font-size: 35rpx;
		font-weight: bold;
	}
	.item-xs{
		color: #dd534d;
		font-weight: bold;
	}
	.item{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		color: #333333;
		background-color: #ffffff;
		border-bottom: 1rpx solid #C8C7CC;
	}
	.tab_title{
		display: inline-block;
		margin-left: 10rpx;
		line-height: 70rpx;
		color: #333333;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #C8C7CC;
	}
	.tab{
		background-color: #DD524D
	}
	scroll-view::-webkit-scrollbar{
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
	.sp {
		border-bottom: 1rpx solid #e5eaf3;
		margin: 10rpx 10rpx 20rpx 20rpx;
	}
	
	.sp video{
		width: 96%;
		margin-left: 11rpx;
	}
	
</style>
